<template>
  <div class="app-container">
    <ehead index="1"></ehead>
    <uploads type="静态码"></uploads>
    <div style="background-color: rgb(239 239 239 / 40%)" class="p-10 c">
      <div class="content">
        <div class="p-6 text-center" style="font-size: 40px; font-weight: 400">模板库</div>
        <div class="text-center" style="">
          <el-row>
            <el-col :span="4">
              <a href="/mb">
                <el-button color="#333333" size="large" style="width: 134.29px; height: 50px; font-size: 20px"
                  >推荐模版</el-button
                ></a
              ></el-col
            >
            <el-col :span="4"
              ><a href="/mb"
                ><el-button color="#333333" size="large" style="width: 134.29px; height: 50px; font-size: 20px"
                  >建筑施工</el-button
                ></a
              ></el-col
            >
            <el-col :span="4"
              ><a href="/mb"
                ><el-button color="#333333" size="large" style="width: 134.29px; height: 50px; font-size: 20px"
                  >生产制造</el-button
                ></a
              ></el-col
            >
            <el-col :span="4"
              ><a href="/mb"
                ><el-button color="#333333" size="large" style="width: 134.29px; height: 50px; font-size: 20px"
                  >物业后勤</el-button
                ></a
              ></el-col
            >
            <el-col :span="4"
              ><a href="/mb"
                ><el-button color="#333333" size="large" style="width: 134.29px; height: 50px; font-size: 20px"
                  >医疗卫生</el-button
                ></a
              ></el-col
            >
            <el-col :span="4"
              ><a href="/mb"
                ><el-button color="#333333" size="large" style="width: 134.29px; height: 50px; font-size: 20px"
                  >能源电力</el-button
                ></a
              ></el-col
            >
          </el-row>
          <el-row>
            <el-col :span="4"> </el-col>
            <el-col :span="4"></el-col>
            <el-col :span="4"></el-col>
            <el-col :span="4"></el-col>
            <el-col :span="4"></el-col>
            <el-col :span="4">
              <div style="height: 50px; padding-right: 33px; margin-top: 20px; line-height: 30px; text-align: right">
                <a href="/mb">查看所有模板》</a>
              </div>
            </el-col>
          </el-row>
        </div>

        <div class="grid grid-cols-5 gap-4 mt-2">
          <!-- 假设你有一个名为boxes的数组，用来生成子div -->
          <div v-for="(item, index) in list3.slice(0, 20)" :key="item.id" class="p-4" @click="previewmb(item)">
            <div style="position: relative; width: 100%" class="border p-2">
              <img :src="item.coverImg" mode="heightFix" style="width: 100%; height: auto; margin: 0 auto" />
            </div>
            <div style="margin-top: 14px; font-size: 18px; color: rgb(16 16 16 / 100%)">{{ item.tName }}</div>
            <div style="margin-top: 14px; font-size: 15px">{{ item.tIntroduction }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="bg-white p-10 c">
      <div class="content">
        <div
          class="text-center"
          style="font-size: 30px; font-weight: 800; line-height: 42px; color: rgb(16 16 16 / 100%)"
        >
          文 件 二 维 码 生 成 器
        </div>
        <div class="text-center mt-4" style="font-size: 18px; color: rgb(86 85 85 / 100%)">
          Word、Excel、pdf、WPS文档即可生成二维码
        </div>
        <el-row class="mt-10">
          <el-col :span="12">
            <img
              src="https://ecodestore.oss-cn-beijing.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20240608220026.png"
              class="w-full shadow-lg"
            />
          </el-col>
          <el-col :span="12">
            <div class="p-10">
              <div class="m-2" style="font-size: 20px; font-weight: 600">无论身处何地，随时随地</div>
              <div class="m-2" style="font-size: 20px; font-weight: 600">只要用手机扫一扫，就能轻松查看所需文件</div>
              <div class="m-2">您可以轻松地将文件与朋友分享，生成的二维码在有效期内可随时使用。</div>
              <div class="m-2">对于关键文件，您可以设定特定的下载权限，确保文件只能在线浏览而不允许直接下载</div>
              <div class="m-2" style="font-size: 20px; font-weight: 600">可灵活组合图文，音频，视频表格等内容</div>
              <div class="m-2">
                这些图文，音频，视频，表格等可以随意调整和组合利用样式将组件进行简单的排版就能制作出吸引人的精美内容。
              </div>
              <a href="/file">
                <el-button class="mt-10" color="#333333" size="large" style="width: 200px; height: 50px"
                  >立即使用</el-button
                >
              </a>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div style="background-color: rgb(239 239 239 / 40%)" class="p-10 c">
      <div class="content">
        <div
          class="text-center"
          style="font-size: 30px; font-weight: 800; line-height: 42px; color: rgb(16 16 16 / 100%)"
        >
          音 视 频 二 维 码 生 成 器
        </div>
        <div class="text-center mt-4" style="font-size: 18px; color: rgb(86 85 85 / 100%)">
          音频、视频上传生成二维码
        </div>
        <el-row class="mt-10">
          <el-col :span="12">
            <div class="p-10">
              <div class="m-2" style="font-size: 20px; font-weight: 600">无论身处何地，随时随地</div>
              <div class="m-2" style="font-size: 20px; font-weight: 600">只要用手机扫一扫，就能轻松查看所需文件</div>
              <div class="m-2">您可以轻松地将文件与朋友分享，生成的二维码在有效期内可随时使用。</div>
              <div class="m-2">对于关键文件，您可以设定特定的下载权限，确保文件只能在线浏览而不允许直接下载</div>
              <div class="m-2" style="font-size: 20px; font-weight: 600">可灵活组合图文，音频，视频表格等内容</div>
              <div class="m-2">
                这些图文，音频，视频，表格等可以随意调整和组合利用样式将组件进行简单的排版就能制作出吸引人的精美内容。
              </div>
              <a href="/av">
                <el-button class="mt-10" color="#333333" size="large" style="width: 200px; height: 50px"
                  >立即使用</el-button
                >
              </a>
            </div>
          </el-col>
          <el-col :span="12">
            <img
              src="https://ecodestore.oss-cn-beijing.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20240608220026.png"
              class="w-full shadow-lg"
            />
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="bg-white p-10 c">
      <div class="content">
        <div
          class="text-center"
          style="font-size: 30px; font-weight: 800; line-height: 42px; color: rgb(16 16 16 / 100%)"
        >
          表 单 二 维 码 生 成 器
        </div>
        <div class="text-center mt-4" style="font-size: 18px; color: rgb(86 85 85 / 100%)">
          纸质表格电子化，扫码填写查看记录
        </div>
        <el-row class="mt-10">
          <el-col :span="12">
            <img
              src="https://ecodestore.oss-cn-beijing.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20240608221705.png"
              class="w-full shadow-lg"
            />
          </el-col>
          <el-col :span="12">
            <div class="p-10">
              <div class="m-2" style="font-size: 20px; font-weight: 600">纸质表格电子化，扫码查看或填写</div>

              <div class="m-2">通过扫描二维码，可以快速填写表单内容，</div>
              <div class="m-2">可自定义表单，方便地进行数据搜集。</div>
              <div class="m-2">适合用于各类场合，如出入登记、签到、报名以及保修等。</div>
              <div class="m-2" style="font-size: 20px; font-weight: 600">用一张二维码，为物品建立电子档案</div>
              <div class="m-2">每件物品都附带有一个独特的二维码，</div>
              <div class="m-2">这个二维码与众多业务表格相连接，</div>
              <div class="m-2">通过这些表格来追踪和管理物品的相关信息变化。</div>
              <a href="/form">
                <el-button class="mt-10" color="#333333" size="large" style="width: 200px; height: 50px"
                  >立即使用</el-button
                >
              </a>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div style="background-color: rgb(239 239 239 / 40%)" class="p-10 c">
      <div class="content">
        <div
          class="text-center"
          style="font-size: 30px; font-weight: 800; line-height: 42px; color: rgb(16 16 16 / 100%)"
        >
          应 用 方 案
        </div>
        <div class="grid grid-cols-4 gap-4 mt-10">
          <!-- 假设你有一个名为boxes的数组，用来生成子div -->
          <div v-for="(item, index) in list4.slice(0, 4)" :key="item.id" class="p-4">
            <a href="/mb">
              <img :src="item.coverImg" mode="scaleToFill" style="width: 100%; height: auto; margin: 0 auto" />
              <div style="margin-top: 14px; font-size: 18px; color: rgb(16 16 16 / 100%)">{{ item.tName }}</div>
              <div style="margin-top: 14px; font-size: 15px">{{ item.tIntroduction }}</div>
            </a>
          </div>
        </div>
      </div>
    </div>

    <!-- 页脚 -->
    <efoot></efoot>
    <el-dialog class="no-header-dialog" v-model="perviewdialogVisible" title="二维码预览" width="400">
      <div class="relative" style="height: 720px">
        <div class="absolute top-0 right-0 cursor-pointer" @click="perviewdialogVisible = false">
          <el-icon color="#fff" size="20"><CircleClose /></el-icon>
        </div>
        <perview :list="mblist" :title="mbtitle" />
        <div style="clear: both"></div>
        <div class="text-center">
          <el-button-group>
            <el-button type="primary" @click="sc">收藏</el-button>
            <el-button type="primary" @click="usemb">使用</el-button>
          </el-button-group>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { loginpclog_list, tempalte_list, saveQrcode, i14_favorite_one3 } from '@/api/index.js';
import ehead from '@/views/components/index/head.vue';
import efoot from '@/views/components/index/foot.vue';
import uploads from '@/views/components/index/upload.vue';
import perview from '@/views/editor/components/preview.vue';
import { useRoute, useRouter } from 'vue-router';
const router = useRouter();
const list3 = ref([]);
function tempalte_list_fun() {
  tempalte_list({ tcId: -1 }).then((res3) => {
    console.log('res3', res3);
    list3.value = res3.data.data.listdata;
  });
}
const list4 = ref([]);
function tradecategory_list_fun() {
  console.log('tradecategory_list_fun:');
  tempalte_list({ tpId: -1 }).then((res3) => {
    list4.value = res3.data.data.listdata;
    console.log(' list4.value:', list4.value);
  });
}
tempalte_list_fun();
tradecategory_list_fun();
const perviewdialogVisible = ref(false);
const mbid = ref(0);
const mblist = ref([]);
const mbtitle = ref('');
function previewmb(item) {
  console.log('item', item);
  mbid.value = item.id;
  mbtitle.value = item.tName;
  mblist.value = JSON.parse(item.tJson);
  perviewdialogVisible.value = true;
}
function usemb() {
  router.push('/v3?tid=' + mbid.value);
}
function sc() {
  i14_favorite_one3(mbid.value).then((res) => {
    ElMessage({
      message: '收藏成功！',
      type: 'success',
    });
  });
}
</script>
<style>
.no-header-dialog {
  background: transparent !important;
  box-shadow: 0 0 0 0 rgb(0 0 0 / 0%), 0 8px 20px rgb(0 0 0 / 0%);
}

.no-header-dialog .el-dialog__header {
  display: none;
}

.content {
  width: 1200px;
  margin: 0 auto;
}

.el-menu--horizontal {
  height: 46px !important;
}
</style>

<style scoped lang="less">
.el-menu {
  border-right: solid 1px var(--el-menu-border-color);
  list-style: none;
  position: relative;
  margin: 0;
  padding-left: 0;
  background-color: transparent !important;
  box-sizing: border-box;
}

.el-menu-item {
  width: 100px;
}

.el-menu--horizontal .el-menu-item:not(.is-disabled):hover,
.el-menu--horizontal .el-menu-item:not(.is-disabled):focus {
  outline: none;
  color: #fff !important;
  background-color: #333333 !important;
}

.el-menu--horizontal.el-menu {
  border-bottom: solid 0px var(--el-menu-border-color) !important;
}

.el-menu--horizontal > .el-menu-item.is-active {
  border-bottom: 0px solid #f1c40f !important;
  background-color: #333333 !important;
  color: #fff !important;
  border-radius: 0px;
}

.el-menu--horizontal > .el-menu-item:hover {
  border-bottom: 0px solid #f1c40f !important;
  background-color: #333333 !important;
  color: #fff !important;
  border-radius: 0px;
}

.el-menu--horizontal > .el-menu-item:focus {
  border-bottom: 0px solid #f1c40f !important;
  background-color: #333333 !important;
  color: #fff !important;
  border-radius: 8px;
}

.el-menu--horizontal {
  display: flex;

  flex-wrap: nowrap;
  border-right: none;
  height: 46px !important;
}

.c {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 20rpx;
  min-width: 1200px;
}
.cc {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 40rpx;
}
.borderNone {
  :deep(.el-input__wrapper) {
    box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
    cursor: default;

    .el-input__inner {
      cursor: default !important;
      border: 0 !important;
    }
  }
}
</style>

